<template>
  <div class="container">
    <navBar :navBar="navBar"></navBar>
    <div class="content">
      <div class="item">
        <p class="ttl">{{ $t("旧密码") }}</p>
        <div class="inputBox">
          <input
            :type="seeText03"
            v-model="oldPwd"
            :placeholder="$t('旧密码')"
          />
          <img
            v-show="seeShow03"
            src="../../assets/images/see.png"
            @click="seeShowFunc03"
            alt=""
          />
          <img
            v-show="!seeShow03"
            src="../../assets/images/no_see.png"
            @click="seeShowFunc03"
            alt=""
          />
        </div>
      </div>
      <div class="item">
        <p class="ttl">{{ $t("新密码") }}</p>
        <div class="inputBox">
          <input
            :type="seeText01"
            v-model="password"
            :placeholder="$t('设置新密码')"
          />
          <img
            v-show="seeShow01"
            src="../../assets/images/see.png"
            @click="seeShowFunc01"
            alt=""
          />
          <img
            v-show="!seeShow01"
            src="../../assets/images/no_see.png"
            @click="seeShowFunc01"
            alt=""
          />
        </div>
      </div>
      <div class="item">
        <p class="ttl">{{ $t("确认密码") }}</p>
        <div class="inputBox">
          <input
            :type="seeText02"
            v-model="confirmPassword"
            :placeholder="$t('请再次输入新密码')"
          />
          <img
            v-show="seeShow02"
            src="../../assets/images/see.png"
            @click="seeShowFunc02"
            alt=""
          />
          <img
            v-show="!seeShow02"
            src="../../assets/images/no_see.png"
            @click="seeShowFunc02"
            alt=""
          />
        </div>
      </div>
      <div class="btnBox">
        <van-button block type="info" @click="changePwd">{{ $t("确定") }}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "loginPassword",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("修改登录密码"),
        close: false,
        btn: "",
      },
      oldPwd: "",
      password: "",
      confirmPassword: "",
      seeText01: "password",
      seeText02: "password",
      seeText03: "password",
      seeShow01: false,
      seeShow02: false,
      seeShow03: false,
    };
  },
  mounted() {},
  methods: {
    // 设置登录密码
    changePwd() {
      if (this.password != this.confirmPassword) {
        this.$toast(this.$("两次密码不一致"));
        return false;
      }
      let data = {
        pwd: this.oldPwd,
        new_pwd: this.password,
      }
      $postAxios(api.changePwd, data, (res) => {
        if (res.code == 0) {
          this.$toast(this.$("设置成功"));
          setTimeout(() => {
              this.$router.replace("/");
          }, 600)
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
    // 显示密码
    seeShowFunc01() {
      this.seeShow01 = !this.seeShow01;
      if (this.seeShow01) {
        this.seeText01 = "text";
      } else {
        this.seeText01 = "password";
      }
    },
    // 显示密码
    seeShowFunc02() {
      this.seeShow02 = !this.seeShow02;
      if (this.seeShow02) {
        this.seeText02 = "text";
      } else {
        this.seeText02 = "password";
      }
    },
    // 显示密码
    seeShowFunc03() {
      this.seeShow03 = !this.seeShow03;
      if (this.seeShow03) {
        this.seeText03 = "text";
      } else {
        this.seeText03 = "password";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-top: 40px;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  box-sizing: border-box;
  background-color: #21212b;
  .content {
    margin: 0 auto;
    padding: 10px 20px;
    .item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1px solid #111;
      .ttl {
		  flex: 1.5;
        padding: 10px 0;
        font-size: 14px;
		color: #fff;
      }
      .inputBox {
        // margin-bottom: 10px;
        flex: 4;
        position: relative;
        input {
          padding: 0;
          width: 100%;
          height: 45px;
          display: block;
          font-size: 14px;
		  color: #fff;
          // border-radius: 5px;
		  border: none;
          // border: solid 1px #e6eaed;
		  background-color: transparent;
          box-sizing: border-box;
        }
        img {
          display: block;
          width: 22px;
          flex-shrink: 0;
          height: auto;
          position: absolute;
          right: 12px;
          top: 10px;
        }
      }
    }
    .btnBox {
      margin-top: 50px;
      width: 100%;
	  .van-button {
	    // margin-top: 30px;
		height: 40px;
	    background: #edd33a;
	    border-radius: 5px;
	    color: #333;
	    border-color: transparent;
	  }
    }
  }
}
</style>